<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Geo3D - ECHARTS-GL</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
        <link rel="stylesheet" href="./common.css">
    </head>
    <body>
        <div id="main"></div>
        <script src="../node_modules/echarts/dist/echarts.js"></script>
        <script src="../dist/echarts-gl.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="js/commonUI.js"></script>
        <script>
            var points = [[280.35714,648.79075,286.78571,662.8979,263.28607,661.17871,262.31092,671.41548,250.53571,677.00504,250.53571,683.43361,256.42857,685.21933,297.14286,669.50504,289.28571,649.50504,285,631.6479,285,608.79075,292.85714,585.21932,306.42857,563.79075,323.57143,548.79075,339.28571,545.21932,357.85714,547.36218,375,550.21932,391.42857,568.07647,404.28571,588.79075,413.57143,612.36218,417.14286,628.07647,438.57143,619.1479,438.03572,618.96932,437.5,609.50504,426.96429,609.86218,424.64286,615.57647,419.82143,615.04075,420.35714,605.04075,428.39286,598.43361,437.85714,599.68361,443.57143,613.79075,450.71429,610.21933,431.42857,575.21932,405.71429,550.21932,372.85714,534.50504,349.28571,531.6479,346.42857,521.6479,346.42857,511.6479,350.71429,496.6479,367.85714,476.6479,377.14286,460.93361,385.71429,445.21932,388.57143,404.50504,360,352.36218,337.14286,325.93361,330.71429,334.50504,347.14286,354.50504,337.85714,370.21932,333.57143,359.50504,319.28571,353.07647,312.85714,366.6479,350.71429,387.36218,368.57143,408.07647,375.71429,431.6479,372.14286,454.50504,366.42857,462.36218,352.85714,462.36218,336.42857,456.6479,332.85714,438.79075,338.57143,423.79075,338.57143,411.6479,327.85714,405.93361,320.71429,407.36218,315.71429,423.07647,314.28571,440.21932,325,447.71932,324.82143,460.93361,317.85714,470.57647,304.28571,483.79075,287.14286,491.29075,263.03571,498.61218,251.60714,503.07647,251.25,533.61218,260.71429,533.61218,272.85714,528.43361,286.07143,518.61218,297.32143,508.25504,297.85714,507.36218,298.39286,506.46932,307.14286,496.6479,312.67857,491.6479,317.32143,503.07647,322.5,514.1479,325.53571,521.11218,327.14286,525.75504,326.96429,535.04075,311.78571,540.04075,291.07143,552.71932,274.82143,568.43361,259.10714,592.8979,254.28571,604.50504,251.07143,621.11218,250.53571,649.1479,268.1955,654.36208,325,437,320,423,329,413,332,423,320.72342,480,338.90617,465.96863,347.99754,480.61584,329.8148,510.41534,339.91632,480.11077,334.86556,478.09046], [94,98]];

            var vertices = points[0];
            var holes = points[1];
            if (holes) {
                var newHoles = [];
                for (var i = 0; i < holes.length; i++) {
                    var startIdx = holes[i];
                    var endIdx = holes[i + 1] || vertices.length;

                    newHoles.push(vertices.slice(startIdx * 2, endIdx * 2));
                }
                vertices = vertices.slice(0, holes[0] * 2);
                holes = newHoles;
            }
            else {
                holes = [];
            }

            var exterior = [];
            for (var i = 0; i < vertices.length;) {
                exterior.push([vertices[i++], vertices[i++]]);
            }
            holes = holes.map(function (hole) {
                var pts = [];
                for (var i = 0; i < hole.length;) {
                    pts.push([hole[i++], hole[i++]]);
                }
                return pts;
            });

            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            canvas.width = 500;
            canvas.height = 500;
            canvas.style.cssText = 'position:absolute;left:0;top:0;z-index:100';
            document.body.appendChild(canvas);
            ctx.translate(-200, -300);
            ctx.strokeStyle = '#fff';
            ctx.beginPath();
            ctx.moveTo(exterior[0][0], exterior[0][1]);
            for (var i = 1; i < exterior.length; i++) {
                ctx.lineTo(exterior[i][0], exterior[i][1]);
            }
            ctx.closePath();
            ctx.stroke();

            holes.forEach(function (hole) {
                ctx.beginPath();
                ctx.moveTo(hole[0][0], hole[0][1]);
                for (var i = 1; i < hole.length; i++) {
                    ctx.lineTo(hole[i][0], hole[i][1]);
                }
                ctx.closePath();
                ctx.stroke();
            });

            echarts.registerMap('sample', {
                type: 'FeatureCollection',
                features: [{
                    type: 'Feature',
                    geometry: {
                        type: 'Polygon',
                        coordinates: [exterior].concat(holes)
                    },
                    properties: {
                        name: 'Dude'
                    }
                }]
            })
            var chart = echarts.init(document.getElementById('main'));

            chart.setOption({
                geo3D: {
                    map: 'sample',
                    bevelSize: 1,
                    alpha: 80
                },
                series: []
            });

            window.addEventListener('resize', function () {
                chart.resize();
            });

        </script>
    </body>
</html>